<template>
  <footer class="footer">
    <ul>
      <router-link tag="li" :to="item.path" v-for = " (item, index) of list " :key = "index">
        <span :class="item.icon"></span>
        <p>{{item.name}}</p>
      </router-link>
    </ul>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      list: [{
        name: '首页',
        icon: 'iconfont icon-home1',
        path: '/home'
      }, {
        name: '名厨',
        icon: 'iconfont icon-chushi',
        path: '/chef'
      }, {
        name: '社区',
        icon: 'iconfont icon-shequ',
        path: '/community'
      }, {
        name: '集市',
        icon: 'iconfont icon-jishi',
        path: '/market'
      }, {
        name: '我的',
        icon: 'iconfont icon-wode1',
        path: '/mine'
      }]
    }
  },
  methods: {
  },
  created() {
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.footer{
  ul{
    @include rect(100%, 100%);
    @include flexbox();
    li{
      @include flex();
      @include rect(auto, 100%);
      @include flexbox();
      @include flex-direction(column);
      @include justify-content();
      @include align-items();
      @include text-color(#333);
      &.router-link-exact-active.router-link-active{
        @include text-color(#f66);
      }
      span{
        @include font-size(0.18rem);
      }
      p{
        @include font-size(0.12rem);
      }
    }
  }
}
</style>
